<tabs cur="cur.tab"></tabs>

<div class="tab-content">
  <div class="tab-pane active row">
    <!-- we want the sidebar on the left on large screens, but "sidebar" on the bottom on phones.
         table plus pull-right makes most of the page unclickable for some reason, so 
         individual pull/push offsets for each screen size are needed. -->
    <div class="col-lg-9 col-md-8 col-sm-7 col-lg-push-3 col-md-push-4 col-sm-push-5">
      <ul class="nav nav-pills nav-justified text-nowrap visible-xs">
        <li><a ng-href="#/unit/{{cur.unit.prev.unittype.slug}}" ng-if="cur.unit.prev && cur.unit.prev.isVisible()">
          <span class="glyphicon glyphicon-chevron-left"></span>
          {{cur.unit.prev.count() | bignum:0}} {{cur.unit.prev.unittype.plural}} {{cur.unit.prev.suffix}}
          <span class="prev-icon-resource icon-{{cur.unit.prev.name}}"></span>
        </a></li>
        <li><a ng-href="#/unit/{{cur.unit.next.unittype.slug}}" ng-if="cur.unit.next && cur.unit.next.isVisible()">
          <span class="next-icon-resource icon-{{cur.unit.next.name}}"></span>
          {{cur.unit.next.count() | bignum:0}} {{cur.unit.next.unittype.plural}} {{cur.unit.next.suffix}}
          <span class="glyphicon glyphicon-chevron-right"></span>
        </a></li>
      </ul>
      <a ng-href="#{{cur.tab.url(false)}}" type="button" class="close pull-right btn"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></a>
      <h3><a class="selected-label label-{{cur.unit.name}}" ng-href="#{{cur.tab.url(false)}}">
        <span class="label-label">{{cur.unit.unittype.label}}</span><span class="label-suffix"> {{cur.unit.suffix}}</span>
      </a></h3>
      <unit cur="cur.unit"></unit>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-5 col-lg-pull-9 col-md-pull-8 col-sm-pull-7">
      <table class="table unit-table table-hover">
        <!-- filthy hack to show achievements on larvae page -->
        <tr ng-if="cur.tab.name == 'larva' && game.upgrade('achievementbonus').count() > 0">
          <td class="upgrade-indicator"></td>
          <td class="titlecase">
            <a href="#/achievements" class="unit-sidebar">
              <span class="list-icon-resource icon-achievements"></span>
              <div class="pull-left">achievement points</div>
              <div class="unit-count">{{game.achievementPoints()|bignum:0}}</div>
            </a>
          </td>
        </tr>
        <tr ng-repeat="unit in cur.tab.sortUnits() | filter:filterVisible track by unit.name" ng-class="{active:unit.name===cur.unit.name}" ng-click="click(unit)">
          <td class="upgrade-indicator">
            <span ng-if="unit.isNewlyUpgradable()" title="New upgrade available" class="animif glyphicon glyphicon-circle-arrow-up"></span>
          </td>
          <td class="titlecase">
            <a href="#/tab/{{cur.tab.name}}/unit/{{unit.unittype.slug}}" class="unit-sidebar">
              <span class="list-icon-resource icon-{{unit.name}}"></span>
              <div class="pull-left list-label label-{{unit.name}}">
                <span class="label-label">{{unit.unittype.label}}</span>
                <span class="label-suffix">{{unit.suffix}}</span>
              </div>
              <div class="unit-count">
                {{unit.count()|bignum:0}}
                <span ng-if="unit.capValue()">({{unit.capPercent()|percent:{floor:true} }})</span>
              </div>
            </a>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>
